<template>
  <div>
    <bread :linktitle="list"></bread>
    <div class="params-wrap">
      <el-alert
        title="注意:只允许为第三级分类设置相关参数!"
        type="warning"
        show-icon
      >
      </el-alert>
      <el-row
        type="flex"
        align="middle"
        style="padding:20px 0; text-align:left"
      >
        <el-col style="width:115px;">选择商品分类:</el-col>
        <el-col style="width:250px;"
          ><el-cascader v-model="value" :options="options" :props="defaultParams" @change="handleChange" clearable></el-cascader
        ></el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-button type="primary" style="margin-bottom:10px"
          >添加参数</el-button
        >
        <el-tab-pane label="动态参数" name="active">用户管理</el-tab-pane>
        <el-tab-pane label="静态属性" name="static">配置管理</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import bread from "../../../common/breadcrumb.vue";
export default {
  data() {
    return {
        value:[],
    defaultParams:{
        label: 'cat_name',
         value: 'cat_id',
         children: 'children'
    },
      activeName: "active",
      list: ["首页", "商品管理", "参数列表"],
      options: [
      
      ]
    };
  },
  methods: {
     handleChange(value) {
         console.log(value)
    },
      handleClick(){

      },
    async getcate() {
        let {data,meta} = await this.$http.get('categories')
        if(meta.status !== 200) return this.$message.error(meta.msg)
        this.options = data
        this.$message.success(meta.msg) 
       
    }
  },
  created(){
      this.getcate()
      
  },
  components: {
    bread
  }
};
</script>
<style scoped>
.params-wrap {
  height: 500px;
  background-color: #fff;
  margin-top: 15px;
  padding: 15px;
  box-sizing: border-box;
  text-align: start;
}
</style>
